<template>
  <view class="task-item">
    <u-card
      :show-head="false"
      border-radius="32"
      margin="20rpx 30rpx"
      @click="gotoWork()"
    >
      <view slot="body">
        <view class="font-bold u-font-32 u-m-b-20 u-line-3 u-text-color">{{
          info?.taskName
        }}</view>
        <slot name="body" :data="info"></slot>
      </view>
      <view slot="foot">
        <view class="u-flex u-row-between u-padding-20 u-p-l-32 u-p-r-32">
          <u-tag
            shape="circle"
            border-color="transparent"
            :text="gettaskTypeText(info.taskType)"
            type="success"
          ></u-tag>
          <u-text
            :class="[
              'u-type-' + TASK_STATUS_TYPES_MAP[info.taskStatus].color,
              'font-bold',
            ]"
            >{{ TASK_STATUS_TYPES_MAP[info.taskStatus].label }}</u-text
          >
        </view>
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import {
  TASK_STATUS_TYPES_MAP,
  TASK_TYPES,
} from '@/pageProject/project/work/index';
import { getProjectDetails } from '@/api/modules/project';
const props = defineProps<{
  info: any;
}>();

const { info } = toRefs(props);

const gotoWork = () => {
  getProjectDetails({ projectId: info.value.projectId }).then((res: any) => {
    const pInfo = {
      projectName: res.projectName,
      projectType: res.projectType,
      drugRegister: res.drugRegister,
      stages: res.stages,
      projectNo: res.projectNo,
    };
    (uni as any).$Router.push({
      name: 'taskDetails',
      params: {
        taskId: info.value.taskId,
        projectInfo: pInfo,
      },
    });
  });
};

const gettaskTypeText = (type: number) => {
  let text = '';
  TASK_TYPES.forEach((item) => {
    if (item.value === type) {
      text = item.label;
    }
  });
  return text;
};
</script>
<style lang="scss" scoped>
.task-item {
  overflow: hidden;

  & :first-child {
    margin-top: 0 !important;
  }
  .text-primary {
    color: $u-type-primary;
  }
}
</style>
